/*
 * 忘记密码
 * @Author: zfx
 * @Date: 2018-09-18 14:30:23
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
.v-admin-forgot-password {
    .forgot-content {
		width: 500px;
		height: 600px;
        margin: 0;
        box-shadow: 0px 0px 10px 1px #cecece;
		display: flex;
		justify-content: center;
		border-radius: 0;
        .forgot-box {
            background: #fff;
            position: relative;
            width: 500px;
            height: 600px;
            padding: 20px 50px;
            .forgot-header {
                display: flex;
                justify-content: space-around;
                align-items: center;
                margin-bottom: 15px;
                span {
                    height: 1px;
                    width:107px;
                    background:#2D8CF0;
                }
                h1 {
                    line-height: 100px;
                    text-align: center;
                    letter-spacing: 3px;
                    font-size: 24px;
                    color: #2D8CF0;
                }
            }
            /*重新登录*/
            .go-login {
                font-size: 14px;
                color: #999999;
                text-align: right;
                padding-right: 12px;
                span {
					color:#2D8DF0;
					cursor: pointer;
                }
            }
            /*重新登录 END*/
            /*邮箱*/
			.form-email {
				padding: 0 10px;
				margin: 70px 0;
				span {
					color: #B3D8FF;
					font-size: 12px;
					margin-left: 5px;
				}
				/*input输入框样式*/
				input {
					display: block;
					border: none;
					border-bottom: 1px solid #E5E5E5;
					width: 100%;
					outline: none;
					font-size: 14px;
					color: #333;
                }
                p {
                    padding: 15px 0;
                    color:#999999;
				}
            }
             /*邮箱 END*/
             /*邮箱申请成功*/
            .apply-successful, .resetPass-successful {
                text-align: center;
				padding: 0 30px;
				height: 230px;
				display: flex;
				justify-content: center;
				align-items: center;
                img {
                    width: 40px;
                    height: 40px;
                }
                p {
                    font-size: 14px;
                    color: #666;
                }
                div {
                    font-size: 14px;
                    color: #999;
                }
            }
             /*邮箱申请成功 END*/
            /*重新发送*/
            .to-resend {
                font-size: 14px;
                color: #999999;
                text-align: center;
                padding: 15px 0;
                span {
					color:#2D8DF0;
					cursor: pointer;
                }
			}
			/*重新发送 END*/
			/*表单按钮样式*/
			.form-button {
				text-align: center;
				.ivu-btn-primary {
					height: 45px;
					width: 350px;
					border-radius: 25px;
					font-size: 16px;
					color: #fff;
					margin-top: 25px;
					box-shadow: 0 9px 30px rgba(45,140,240,0.5);
				}
			}
			/*表单按钮样式 END*/
        }
    }
    .login-load {
        background-color: rgba(0, 0, 0, 0.5);
    }
    .footer-logo {
        position: absolute;
        bottom: 10px;
        width: 100%;
        height: 30px;
        font-size: 0;
        text-align: center;
        img {
            height: 100%;
        }
	}
	.language{
		position: absolute;
		right: 40px;
	}
}
</style>
<template>
	<div class="v-admin-forgot-password">

		<div class="forgot-content _fun-hide">
			<div class="forgot-box">

				<div class="forgot-header">
					<span/>
					<h1 class="login__title">
						{{ $t('login.retrieve_password') }}
					</h1>
					<span/>
				</div>

				<div class="go-login">
					{{ $t('login.existing_account') }}
					<span @click="goLogin">{{ $t('login.login_immediately') }}</span>
				</div>

				<Form
					ref="formData"
					:model="form_data"
					:rules="ruleInline"
					name="login__form"
					@keydown.native.enter.prevent="handleSubmit('formData')">
					<!-- 邮箱验证 -->
					<Form-item
						v-show="emailShow"
						prop="email"
						class="form-email">
						<span>{{ $t('login.account') }}</span>
						<input
							v-model="form_data.email"
							:placeholder="$t('login.please_enter_account')"
							type="text"
							name="email">
						<!-- <AutoComplete
							v-model="form_data.email"
							:placeholder="$t('login.please_enter_email')"
							name="email"
							@on-search="handleSearch">
							<Option
								v-for="item in email_suffixs"
								:value="item"
								:key="item">{{ item }}</Option>
						</AutoComplete> -->
						<p>
							<Icon
								type="ios-medical"
								class="icon-medical"
								size="8px"
								color="#FF7070"/>
							{{ $t('login.warm_tip') }}
						</p>
					</Form-item>
					<!-- 邮箱申请成功 -->
					<Form-item
						v-show="!emailShow"
						prop="password"
						class="apply-successful">
						<img
							src="~src/assets/icon/icon-chenggong.png"
							alt="">
						<p>{{ $t('login.apply_password_success') }}</p>
						<div>{{ $t('login.send_email') }}<span> {{ asteriskEmail }} </span>{{ $t('login.an_email') }}</div>
					</Form-item>
					<!-- 按钮 -->
					<Form-item
						class="form-button">
						<Button
							type="primary"
							long
							name="login__submit"
							@click="handleSubmit('formData')">
							{{ emailShow ? $t('login.next_step') : $t('login.return') }}
						</Button>
					</Form-item>
				</Form>

				<div
					v-if="!emailShow"
					class="to-resend">
					{{ $t('login.not_received') }}
					<span @click="toResend">{{ $t('login.to_resend') }}</span>
				</div>

				<Spin
					v-if="loading"
					fix
					class="login-load">
					<Icon
						type="load-c"
						size="18"
						class="demo-spin-icon-load" />
					<div>
						{{ $t('login.please_wait') }}
					</div>
				</Spin>

			</div>
		</div>
	</div>
</template>
<script type="text/babel">

export default {
	props: {
		emailShow: {
			type: Boolean,
			default() {
				return true;
			},
		},
		asteriskEmail: {
			type: String,
			default() {
				return '';
			},
		},
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
	},
	data() {
		return {
			email_suffixs: [], // 自动补全email后缀

			form_data: {
				email: '', // 邮箱
			},

			ruleInline: { // 表单验证规则
				email: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('customer.account') }),
						trigger: 'blur,change',
					},
				],
			},
		};
	},
	methods: {

		/**
		 * 提交表单的方法
		 * @return {undefined} {description}
		 */
		handleSubmit(name) {
			if (this.emailShow) {
				this.$refs[name].validate((valid) => {
					if (valid) {
						this.$emit('senEmail', this.form_data.email);
					} else {
						this.$Message.error(this.$t('common.invalid_form_data'));
					}
				});
			} else {
				this.$emit('backUp');
			}
		},

		/**
		 * 重新发送邮箱
		 * @return {undefined} {description}
		 */
		toResend() {
			this.$emit('senEmail', this.form_data.email);
		},

		/**
		 * 跳到立即登录
		 * @return {undefined} {description}
		 */
		goLogin() {
			this.$emit('loginShow');
		},

		/**
         * 邮箱拼接自动补全的数据
         * @param  {string} value {输入的数据}
         * @return {undefined}
         */
		handleSearch(value) {
			this.email_suffixs = !value || value.indexOf('@') >= 0 ? [] : [
				`${value}@qq.com`,
				`${value}@sina.com`,
				`${value}@163.com`,
				`${value}@163.net`,
				`${value}@gmail.com`,
				`${value}@yahoo.com`,
				`${value}@msn.com`,
				`${value}@hotmail.com`,
				`${value}@aol.com`,
				`${value}@ask.com`,
				`${value}@live.com`,
			];
		},

	},
};
</script>
